feat: typescript compilation check on CI #39
Conversation
- Introduced a new script for TypeScript type checking in package.json. - Updated tsconfig.json to skip library checks for improved build performance.
- Introduced a new GitHub Actions workflow for TypeScript type checking in the frontend application. - The workflow triggers on pushes and pull requests to the develop branch, ensuring type safety during development. - Configured steps for checking out the code, setting up Node.js, installing dependencies, and running type checks.
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📝 WalkthroughWalkthroughAdds frontend TypeScript type-checking: new GitHub Actions workflow, a typecheck script and helper shell script, TypeScript config and ambient Vue SFC declaration; minor frontend code edits (router param renames, small store type/cast and import adjustments, a TS ignore insertion). Changes
Sequence Diagram(s)sequenceDiagram
participant GH as GitHub Actions
participant Runner as Runner
participant Repo as Repository
participant Node as Node.js (v24)
participant Yarn as Yarn
participant TSC as TypeScript Compiler
GH->>Runner: workflow triggered (push/PR)
Runner->>Repo: checkout repository
Runner->>Node: setup Node.js v24
Runner->>Yarn: restore/cache deps (frontend/yarn.lock)
Runner->>Repo: install frontend deps (frozen lockfile)
Runner->>Repo: run `yarn typecheck` (frontend)
Runner->>TSC: execute `tsc --noEmit`
TSC-->>Runner: emit diagnostics
Runner->>Runner: filter diagnostics (exclude node_modules)
Runner-->>GH: report workflow status (success/failure)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In @.github/workflows/typecheck.yml:
- Around line 7-13: The path filters in the workflow use the wrong prefix
("apps/forms_pro/frontend/**") so the workflow never triggers; update both
occurrences under push.paths and pull_request.paths to the actual repo location
("frontend/**") while keeping the workflow file itself
(".github/workflows/typecheck.yml") in the list; modify the paths arrays in the
typecheck.yml triggers to replace "apps/forms_pro/frontend/**" with
"frontend/**" so frontend changes correctly trigger the workflow.
- Around line 33-41: The workflow references non-existent paths; update the
cache-dependency-path and the two working-directory fields used in the "Install
dependencies" and "Type check" steps to the correct frontend directory by
replacing "apps/forms_pro/frontend" with "frontend" (ensure
cache-dependency-path: frontend/yarn.lock and both working-directory: frontend),
and scan the same workflow for any other occurrences of
"apps/forms_pro/frontend" to update them similarly.
In `@frontend/tsconfig.json`:
- Line 23: The tsconfig contains a stray top-level "skipLibCheck" property that
is ignored; remove the top-level "skipLibCheck" entry and ensure the existing
compilerOptions.skipLibCheck value (in the "compilerOptions" object) is the
single source of truth; locate the top-level "skipLibCheck" key and delete it so
only "compilerOptions.skipLibCheck" remains.
- Simplified paths in the GitHub Actions typecheck workflow to target the frontend directory directly. - Adjusted working directories for dependency installation and type checking to reflect the new structure.
- Changed the TypeScript library target from ES2020 to ES2022 in tsconfig.json for improved features. - Updated the include paths in tsconfig.json to include types.d.ts and added an exclude rule for node_modules. - Replaced the typecheck command in package.json with a new script (typecheck.sh) that filters out errors from node_modules. - Introduced typecheck.sh to streamline type checking and ignore irrelevant errors from third-party libraries.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@frontend/package.json`:
- Line 11: The typecheck step currently runs tsc --noEmit (referenced in the
"typecheck" script and typecheck.sh) which doesn't type-check Vue SFCs; install
vue-tsc as a devDependency and update typecheck.sh (and the "typecheck" script
if it invokes tsc) to run vue-tsc --noEmit instead of tsc --noEmit so .vue
<script lang="ts"> blocks are properly type-checked.
🧹 Nitpick comments (1)
frontend/typecheck.sh (1)
5-5: Grep filter may miss errors from files outsidesrc/.The pattern
^(src/|error TS)only captures error lines whose file path starts withsrc/. Errors originating from other project files (e.g.,types.d.tsitself, or any future top-level.tsfiles) would be silently dropped.Consider broadening the filter to exclude only
node_modulesrather than allowlistingsrc/:Suggested fix
-ERRORS=$(echo "$OUTPUT" | grep -E "^(src/|error TS)" | grep -v "node_modules/") +ERRORS=$(echo "$OUTPUT" | grep -E "(error TS)" | grep -v "node_modules/")
| "build": "vite build --base=/assets/forms_pro/frontend/ && yarn copy-html-entry", | ||
| "preview": "vite preview", | ||
| "lint": "biome check --write .", | ||
| "typecheck": "./typecheck.sh", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n frontend/package.jsonRepository: BuildWithHussain/forms_pro
Length of output: 1500
🏁 Script executed:
cat -n frontend/typecheck.shRepository: BuildWithHussain/forms_pro
Length of output: 568
🏁 Script executed:
rg 'vue-tsc' frontend/Repository: BuildWithHussain/forms_pro
Length of output: 52
Use vue-tsc instead of tsc to type-check .vue files.
Plain tsc --noEmit only checks .ts/.tsx files; it cannot parse or type-check Vue SFCs. Your current typecheck.sh uses tsc --noEmit, which means any type errors in <script lang="ts"> blocks in .vue files are silently ignored. This is a Vue 3 + TypeScript project, so vue-tsc is the correct tool.
- Add
vue-tscas a dev dependency. - Replace
tsc --noEmitwithvue-tsc --noEmitintypecheck.sh.
Without this, the CI typecheck step provides a false sense of safety — the codebase can have undetected type errors in Vue components.
🤖 Prompt for AI Agents
In `@frontend/package.json` at line 11, The typecheck step currently runs tsc
--noEmit (referenced in the "typecheck" script and typecheck.sh) which doesn't
type-check Vue SFCs; install vue-tsc as a devDependency and update typecheck.sh
(and the "typecheck" script if it invokes tsc) to run vue-tsc --noEmit instead
of tsc --noEmit so .vue <script lang="ts"> blocks are properly type-checked.
- Added missing FormFieldTypes import in editForm store for better type safety. - Updated router beforeEnter and beforeEach hooks to use a consistent parameter naming convention. - Cleaned up trailing commas in computed properties and function calls for improved readability. - Removed unused import in editSubmission store to streamline code.
- Updated package.json to include vue-tsc for enhanced type checking capabilities. - Modified typecheck.sh to utilize vue-tsc instead of tsc, streamlining the type checking process. - Updated yarn.lock to reflect new dependencies and versions for better compatibility.
- Added `<!-- @vue-ignore -->` comments in Attachment.vue and AccessSection.vue to suppress TypeScript warnings. - Updated Dashboard.vue to remove unnecessary template parameters for improved clarity.
- Added a TypeScript ignore comment in socket.ts to suppress warnings related to the import of socketio_port from the configuration file.
1 participant
Summary by CodeRabbit
Chores
Refactor